/**
 * Created by ml620 on 2016/6/21 0021.
 */
/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
var stop = false;
function addAqiData() {
    var cityName = document.getElementById('aqi-city-input').value;
    var cityNum = document.getElementById('aqi-value-input').value;
    var chinese = /^[\u4e00-\u9fa5]{0,}$/;
    var num = /^[1-9]{0,}$/;
    if(!chinese.test(cityName)){
        alert('请输入中文');
        stop = true;
    }else if(!num.test(cityNum)){
        alert('请输入数字');
        stop = true;
    }else{
        aqiData[cityName] = cityNum;
        stop = false;
    }
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var html='<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>';
    function newTr(name,num) {
        return '<tr><td>'+name+'</td><td>'+num+'</td><td><button>删除</button></td></tr>';
    }
    for(var i in aqiData){
        html += newTr(i,aqiData[i]);
    }
    document.getElementById('aqi-table').innerHTML=html;
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
    addAqiData();
    if(!stop) renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(key) {
    // do sth.
    delete aqiData[key];
    renderAqiList();
}

function init() {
    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    var aqitable = document.getElementById('aqi-table');
    document.getElementById("add-btn").addEventListener("click", addBtnHandle)
    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    aqitable.addEventListener('click',function (e) {
        if(e.targetName = 'BUTTON'){
            var key = e.target.parentNode.parentNode.childNodes[0].innerHTML;
            console.log(key);
            delBtnHandle(key);
        }
    },false)

}
window.onload = init();